// components/Myck.tsx
import { defineComponent } from 'vue';

// 课程数据类型
interface Course {
  id: number;
  courseName: string;
  teacher: string;
  period: number;
}

export default defineComponent({
  name: 'Myck',
  props: {
    // 课程数据（可选，子组件可提供默认数据）
    courses: {
      type: Array as () => Course[],
      default: () => [
        { id: 1, courseName: 'Vue 3 开发', teacher: 'Alice', period: 40 },
        { id: 2, courseName: 'JavaScript 高级', teacher: 'Bob', period: 32 },
        { id: 3, courseName: 'Node.js 实战', teacher: 'Charlie', period: 36 },
      ],
    },
  },
  render() {
    return (
      <div class="course-table-container">
        <h1>总课程</h1>
        <table class="course-table">
          <thead>
            <tr>
              <th>课程ID</th>
              <th>课程名称</th>
              <th>讲师</th>
              <th>课时</th>
            </tr>
          </thead>
          <tbody>
            {/* 数据行插槽：通过 props 传递课程数据，父组件自定义行样式 */}
            {this.$slots.default?.({ 
              courses: this.courses, // 传递课程数据到父组件插槽
            })}
          </tbody>
        </table>
      </div>
    );
  },
});